<template>
	<view>
		<uni-card title="预订场馆">
			<view class="uni-body">
				<view style="display: flex;flex-direction: row;align-items: center;">
					<uni-icons type="home-filled" size="15"></uni-icons>
					{{order.placeName}}
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;">
					<uni-icons type="location-filled" size="15"></uni-icons>
					{{order.address}}
				</view>
			</view>
		</uni-card>

		<uni-card title="预订场次" :extra="order.preDate">
			<view class="uni-body">
				<view v-for="item in order.venueList"
					style="display: flex;flex-direction: row;justify-content: space-between;">
					<text>{{item.name}} {{item.time}}</text>
					<text>{{item.price}}</text>
				</view>
			</view>
		</uni-card>

		<uni-card title="优惠信息">
			<view class="uni-body">
				<view style="display: flex;flex-direction: row;justify-content: space-between;">
					<text>优惠券</text>
					<view style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
						<text>暂无可使用的优惠券</text>
						<uni-icons type="forward" size="15"></uni-icons>
					</view>
				</view>
			</view>
		</uni-card>

		<uni-card title="支付方式">
			<view class="uni-body">
				<radio-group>
					<view v-for="item in this.paywayList"
						style="display: flex;flex-direction: row;justify-content: space-between;margin-bottom: 20rpx;">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image style="width: 40rpx;height: 40rpx" mode="aspectFit" :src="item.icon"
								@error="imageError"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>

						<radio></radio>
					</view>
				</radio-group>
			</view>
		</uni-card>
		<view style="padding-left: 40rpx;">
			<radio></radio>
			<text>我已阅读并同意</text>
			<text>《预订须知》</text>
		</view>
		<view style="padding:40rpx;display: flex;flex-direction: row;
		justify-content: space-between;align-items:center;">
			<text>总计：¥200</text>
			<text @click="pay" style="width: 200rpx;height: 80rpx;background-color: lawngreen;
			align-items: center;display: flex;justify-content: center;border-radius: 40rpx;">立即支付</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order: {
					placeName: "苏州菜鸟羽毛球俱乐部",
					address: "江苏省苏州市张家港市",
					preDate: '8月4日',
					venueList: [{
							"name": "普通场1",
							"time": "08:00-09:00",
							"price": 40
						},
						{
							"name": "普通场2",
							"time": "10:00-11:00",
							"price": 40
						}
					]
				},
				paywayList: [{
						id: 1,
						type: "wechat",
						name: "微信支付",
						icon: "/static/avatar.png"
					},
					{
						id: 2,
						type: "member",
						name: "会员卡支付",
						icon: "/static/avatar.png"
					}
				],
			}
		},
		onLoad() {

		},
		methods: {
			pay() {
				alert(1)
			}
		}
	}
</script>

<style>

</style>
